<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>SelfVue </title>
  <script src="../js/observe.js" charset="utf-8"></script>
  <script src="../js/compile_v3.js" charset="utf-8"></script>
  <script src="../js/selfvue.js" charset="utf-8"></script>
  <script src="../js/watchers_container.js" charset="utf-8"></script>
  <script src="../js/watcher.js" charset="utf-8"></script>


</head>

<body>
  <div id="vue">
    <p>{{name}}</p>
    <div> <button v-on:click="buttonClick">点我</button></div>
    <div>
      <div>
        <p>{{inputVal}}</p>
      </div>
      <div> 输入框<input type="text" v-model="inputVal"></div>
      <div><label>{{chose}}</label><br><label>选项1</label><input type="radio" name="chose" value="one" v-model="chose">
        <label>选项2</label><input type="radio" name="chose" value="two" v-model="chose">
      </div>
      <div>
        <p>{{area}}</p>
      </div>
      <div>输入域<textarea name="area" cols="30" rows="10" v-model="area"></textarea></div>
      <div>
        <label for="">多选框</label><br>
        {{checkNames}}<br>
        Jack <input type="checkbox" value="Jack" v-model="checkNames">
        Tom<input type="checkbox" value="Tom" v-model="checkNames">
        Harry<input type="checkbox" value="Harry" v-model="checkNames">
        Jerry<input type="checkbox" value="Jerry" v-model="checkNames">
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var SelfVue = new SelfVue({
      el: '#vue',
      data: {
        name: 'helloworld',
        inputVal: 'abc',
        chose: 'two',
        area: 'abc',
        checkNames: ["Jack", "Tom"],
      },
      methods: {
        buttonClick: function() {
          alert('hello')
        }
      }
    })
    // setInterval(function() {
    //   SelfVue.data.name = 'bye bye world' + new Date().getMilliseconds()
    // }, 2000)
  </script>
</body>

</html>